<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
      rel="stylesheet"
    />

    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background: #333; */
        font-family: 'Arial';
        /* font-size: 18px !important; */
      }

      h1 {
        color: grey;
      }

      .mermaid2 {
        display: none;
      }

      .mermaid svg {
        /* font-size: 18px !important; */

        /* background-color: #efefef;
        background-image: radial-gradient(#fff 51%, transparent 91%),
          radial-gradient(#fff 51%, transparent 91%);
        background-size: 20px 20px;
        background-position:
          0 0,
          10px 10px;
        background-repeat: repeat; */
      }

      .malware {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 150px;
        background: red;
        color: black;
        display: flex;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: monospace;
        font-size: 72px;
      }
      pre {
        width: 100%;
      }
      /* tspan {
              font-size: 6px !important;
            } */
    </style>
  </head>

  <body>
    <div class="flex">
      <pre id="diagram" class="mermaid2">
---
  title: hello2
  config:
    look: handDrawn
    layout: elk
    elk:
        <!-- nodePlacementStrategy: INTERACTIVE -->
        <!-- mergeEdges: true -->
---
stateDiagram-v2
    direction LR
    accTitle: An idealized Open Source supply-chain graph

    %%
    state "🟦 Importer" as author_importer
    state "🟥 Supplier, Owner" as author_owner
    state "🟨🟥 Maintainer, Author\n🟨 Custodian" as author
    state "🟩 Distributor" as repository_distributor
    state "🟦 Importer" as language_importer
    state "🟦🟨 Packager" as language_packager
    state "🟦🟨 OSS Steward" as language_steward
    state "🟨 Curator" as language_curator
    state "🟩 Distributor" as language_distributor
    state "🟦 Contributor" as contributor
    state "🟦 Importer" as package_importer
    state "🟨 Patcher" as package_patcher
    state "🟨🟦 Builder\n🟨🟦 Packager\n🟨🟦 Containerizer" as package_packager
    state "🟨 Curator" as package_curator
    state "🟩 Distributor" as package_distributor
    state "🟦 Importer" as integrator_importer
    state "🟥 Supplier, Manufacturer, Owner" as integrator_owner
    state "🟦🟨🟥 Integrator, Developer" as integrator_developer
    state "🟩🟨 SBOM Redactor\n🟩 Publisher" as integrator_publisher
    state "🟦🟨 Builder" as integrator_builder
    state "🟨 Deployer" as deployer
    state "🟦 Vuln. Checker" as integrator_checker
    state "🟩🟨 SBOM Redactor" as redactor
    state "🟦 Consumer\n🟦  User" as consumer
    state "🟦 Auditor" as auditor_internal
    state "🟦 Auditor" as auditor_external

    %%
    classDef createsSBOM stroke:red,stroke-width:3px;
    classDef updatesSBOM stroke:yellow,stroke-width:3px;
    classDef assemblesSBOM stroke:yellow,stroke-width:3px;
    classDef distributesSBOM stroke:green,stroke-width:3px;
    classDef verifiesSBOM stroke:#07f,stroke-width:3px;

    %%
    class author_importer verifiesSBOM
    class author_owner createsSBOM
    class manufacturer_owner createsSBOM
    class author assemblesSBOM
    class package_importer verifiesSBOM
    class package_patcher updatesSBOM
    class package_packager assemblesSBOM
    class package_curator distributesSBOM
    class package_distributor distributesSBOM
    class language_importer verifiesSBOM
    class language_packager assemblesSBOM
    class language_steward updatesSBOM
    class language_curator distributesSBOM
    class language_distributor distributesSBOM
    class repository_distributor distributesSBOM
    class integrator_importer verifiesSBOM
    class integrator_owner createsSBOM
    class integrator_developer assemblesSBOM
    class integrator_publisher distributesSBOM
    class integrator_builder assemblesSBOM
    class integrator_checker verifiesSBOM
    class deployer assemblesSBOM
    class redactor distributesSBOM
    class auditor_internal verifiesSBOM
    class auditor_external verifiesSBOM

    state "Maintainer Environment" as environment_maintainer {
        [*] --> author_importer
        [*] --> author
        author_importer --> author
        author_owner --> author
        author       --> language_packager
    }

    [*] --> environment_maintainer

    state "Language Ecosystem" as ecosystem_lang {
        [*] --> language_importer
        [*] --> language_steward
        [*] --> language_curator
        [*] --> language_distributor
        language_importer --> language_distributor
        language_importer --> language_curator
        language_steward --> language_curator
        language_curator --> language_distributor
    }

    language_packager --> ecosystem_lang
    ecosystem_lang    --> ecosystem_lang

    state "Public Collaboration Ecosystem" as ecosystem_repo {
        [*] --> repository_distributor
    }

    author         --> ecosystem_repo
    ecosystem_repo --> author

    repository_distributor --> contributor
    contributor            --> repository_distributor

    state "Package Ecosystem" as ecosystem_package {
        [*] --> package_importer
        [*] --> package_packager
        [*] --> package_patcher
        package_importer --> package_patcher
        package_importer --> package_packager
        package_patcher  --> package_packager
        package_packager --> package_curator
        package_packager --> package_distributor
        package_curator  --> package_distributor
    }

    repository_distributor --> ecosystem_package
    language_distributor   --> ecosystem_package
    ecosystem_package      --> ecosystem_package

    state "Integrator Environment" as environment_integrator {
        [*] --> integrator_developer
        [*] --> integrator_importer
        integrator_importer  --> integrator_developer
        integrator_owner     --> integrator_developer
        integrator_builder   --> integrator_publisher
        integrator_developer --> integrator_checker
        integrator_checker   --> integrator_developer
        auditor_internal     --> integrator_developer
        integrator_developer --> integrator_builder
        integrator_developer --> auditor_internal
    }

    repository_distributor --> environment_integrator
    language_distributor   --> environment_integrator
    package_distributor    --> environment_integrator

    state "Production Environment" as environment_prod {
        [*] --> deployer
        deployer --> redactor
    }

    integrator_publisher --> [*]
    integrator_developer --> environment_prod
    integrator_builder   --> environment_prod
    integrator_publisher --> environment_prod

    deployer --> auditor_external
    deployer --> consumer
    redactor --> consumer



</pre>

      <pre id="diagram" class="mermaid2">
---
config:
  look: neo
---
flowchart RL
    subgraph "   "
        A5@{ shape: manual-file, label: "a label"}
        B5@{ shape: manual-input, label: "a label" }
        C5@{ shape: mul-doc, label: "a label" }
        D5@{ shape: mul-proc, label: "a label" }
        E5@{ shape: paper-tape, label: "a label" }
        B3@{ shape: das, label: "a label" }
        C3@{ shape: disk, label: "a label" }
        D4@{ shape: lin-doc, label: "a label" }
        E4@{ shape: loop-limit, label: "a label" }
    end
    subgraph "   "
        B6@{ shape: summary, label: "a label" }
        C6@{ shape: tag-we-rect, label: "a label" }
        D6@{ shape: tag-rect, label: "a label" }
        A2@{ shape: fork}
        B2@{ shape: hourglass }
        C2@{ shape: comment, label: "I am a comment" }
        D2@{ shape: bolt }
        D3@{ shape: disp, label: "a label" }
        C4@{ shape: junction, label: "a label" }
        A4@{ shape: extract, label: "a label"}
        B52[a fr]@{ shape: fr }
    end
    subgraph " "
        A1@{ shape: text, label: This is a textblock}
        B1@{ shape: card, label: "a label" }
        C1@{ shape: lined-proc, label: "a label" }
        D1@{ shape: start, label: "a label" }
        E1@{ shape: stop, label: "a label" }
        E2@{ shape: doc, label: "a label" }
        A6@{ shape: stored-data, label: "a label"}
        A3@{ shape: delay, label: "a label" }
        E3@{ shape: div-proc, label: "a label" }
        B4[a label]@{ shape: win-pane }
    end
      </pre>
      <pre id="diagram" class="mermaid2">
---
  title: hello2
  config:
    look: handDrawn
    elk:
      <!-- nodePlacementStrategy: SIMPLE -->
---
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TD

    A([Start]) -->|go to booking page| B("select
    ISBS booking no")
    A --> QQ{cancel booking}
    A --> RR{no show}
    A --> SS{change booking}
    B -->C(wmpay_request_payment.request_type= 'partial',
 wmpay_request_payment.status= 'paid',
 pos_booking.booking_status= ‘partial’ and 'full_deposit')
 style C text-align:left
    C -->D{manage booking}

    D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
    E -->F{กดปุ่ม 'cancel' หรือไม่}
    F -->|Yes|G[ระบบบันทึกค่าใหม่
    และไม่สามารถแก้ไขข้อมูลได้]
    F -->|No|H[กดปุ่ม 'close']
    H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
    G -->|ระบบส่งข้อมูล|I[(POS_database)]
    I -->|pos_booking.booking_status='cancel'|Z([End])


    D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
    J -->K{กดปุ่ม 'noshow' หรือไม่}
    K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
    Product_id: 439,
    ItemName: no show]
     style L text-align:left

     K -->|No|O[กดปุ่ม 'close']
     O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
    L -->M[ระบบบันทึกค่าใหม่]
    M -->|ระบบส่งข้อมูล|N[(POS_database)]
    N -->|pos_booking.booking_status=‘noshow’|Z



</pre>
      <pre id="diagram" class="mermaid2">
---
  title: hello2
  config:
    look: handDrawn
    layout: dagre
    elk:
        nodePlacementStrategy: BRANDES_KOEPF
---
flowchart
  A --> A
  subgraph A
    B --> B
    subgraph B
      C
    end
  end


</pre
      >
      <pre id="diagram" class="mermaid2">
---
config:
  look: handdrawn
  flowchart:
    htmlLabels: true
---
flowchart
      A[I am a long text, where do I go??? handdrawn - true]
</pre
      >
    </div>
    <div class="flex">
      <pre id="diagram" class="mermaid2">
---
config:
  flowchart:
    htmlLabels: false
---
flowchart
      A[I am a long text, where do I go??? classic - false]
</pre
      >
      <pre id="diagram" class="mermaid2">
---
config:
  flowchart:
    htmlLabels: true
---
flowchart
      A[I am a long text, where do I go??? classic - true]
</pre
      >
    </div>
    <pre id="diagram2" class="mermaid2">
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5


    </pre>

    <pre id="diagram3" class="mermaid2">
      flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef ash color:red
    class C ash
    style C stroke:#00f, fill:black

    </pre>

    <pre id="diagram4" class="mermaid2">
      stateDiagram
    A:::foo
    B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    style C stroke:#00f, fill:black, color:white

    </pre>

    <pre id="diagram4" class="mermaid">
flowchart TB
  A@{
    label: "aksljhf kasjdh"
  }
    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      import layouts from './mermaid-layout-elk.esm.mjs';
      mermaid.registerLayoutLoaders(layouts);
      mermaid.parseError = function (err, hash) {
        console.error('Mermaid error: ', err);
      };
      window.callback = function () {
        alert('A callback was triggered');
      };
      mermaid.initialize({
        // theme: 'base',
        // handDrawnSeed: 12,
        // look: 'handDrawn',
        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
        // layout: 'dagre',
        // layout: 'elk',
        // layout: 'fixed',
        // htmlLabels: false,
        flowchart: { titleTopMargin: 10 },
        // fontFamily: 'Caveat',
        // fontFamily: 'Kalam',
        // fontFamily: 'courier',
        sequence: {
          actorFontFamily: 'courier',
          noteFontFamily: 'courier',
          messageFontFamily: 'courier',
        },
        fontSize: 12,
        logLevel: 3,
        securityLevel: 'loose',
      });
      function callback() {
        alert('It worked');
      }
      mermaid.parseError = function (err, hash) {
        console.error('In parse error:');
        console.error(err);
      };
    </script>
  </body>
</html>
